<template>
  <div>
    <div class="main">
      <div class="box">
        <div class="txt-box">
          <p>
            <span>。</span>30天无忧退货
          </p>
          <p>
            <span>。</span>48小时快速回归
          </p>
          <p>
            <span>。</span>满88元免邮费
          </p>
        </div>
      </div>
      <!-- 产品 -->
      <div class="goods" v-for="item in list" :key="item.id">
        <van-checkbox class="left" v-model="item.isChecked" checked-color="#b4282d"></van-checkbox>
        <van-swipe-cell>
          <van-card
            :num="item.number"
            :price="item.retail_price"
            :title="item.goods_name"
            class="goods-card"
            :thumb="item.list_pic_url"
          />
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="delItem(item)"/>
          </template>
        </van-swipe-cell>
      </div>
      <!-- 全选 -->
      <div class="btm">
        <van-checkbox class="left" v-model="allChecked" checked-color="#b4282d">全选</van-checkbox>
        <div class="price">
          <h3 class="txt">¥{{total}}</h3>

          <router-link to="/car/total">
           <!-- <van-button class="right" color="#b4282d">下单</van-button> -->
           <button class="right">下单</button>
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { cartList,deleteAction } from '@/api/car';
export default {
  data() {
    return {
      list: []
    };
  },
  methods: {
    delItem(item){
      deleteAction({
        id: item.id
      }).then(res=>{
        // console.log(res);
        var a = this.list.find(el=>el.id==item.id);
        this.list.splice(a,1);
      })
    }
  },
  created() {
    var openId = localStorage.getItem("openId")
    cartList({
      openId: openId
    }).then(res=>{
      console.log(res);
      res.data.forEach(el => {
        el.isChecked = false;
      });
      this.list.push(...res.data) ;
    })
  },
  computed: {
    allChecked:{
      get(){
        return this.list.every(el=>el.isChecked==true);
      },
      set(val){
        return this.list.forEach(el=>el.isChecked=val);
      }
    },
    total(){
      return this.list.reduce((cur,val)=>{
        if(val.isChecked){
          return cur + val.retail_price * val.number; 
        }else{
          return cur;
        }
      },0)
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  position: relative;
  padding-bottom: 100px;
  width: 100%;
  .box{
    width: 100%;
    background-color: #f4f4f4;
    .txt-box {
      margin: 0 auto 20px;
      width: 355px;
      height: 36px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      p {
        position: relative;
        text-indent: 10px;
        font-size: 12px;
        color: #666;
        span {
          position: absolute;
          left: -9px;
          top: -11px;
          font-size: 20px;
        }
      }
    }
  }
  .goods {
    position: relative;
    width: 100%;
    display: flex;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;
    border-bottom: 2px solid #f4f4f4;
    .left {
      margin-left: 10px;
    }
  }
  .goods-card {
    width: 330px;
    padding: 10px;
    margin-left: 10px;
    background-color: white;
    .van-card__content {
      text-align: left;
    }
    .van-card__num {
      position: absolute;
      top: 35px;
      left: 180px;
    }
    *[data-v-7698a586] {
      margin-right: 10px;
    }
  }

  .delete-button {
    width: 80px;
    height: 100%;
  }
  .btm {
    position: fixed;
    bottom: 50px;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .price{
      display: flex;
      align-items: center;
      .txt{
        margin-right: 10px;
      }
    }
    .left {
      margin-left: 10px;
    }
    .right {
      width: 100px;
      height: 50px;
      background-color: #b4282d;
      color: #fff;
    }
  }
}
</style>